Vue(axios) + expressでセッション管理

Introduction

先日、クライアント側をVue.js、サーバ側をExpressで
sessionを使おうとしたら少々つまづいたので、使用に関するメモです。

Environment

• Client framework : Vue.js 3.0.11
• Http Client : axios 0.21.1
• Node : v14.16.1
• express-session : 1.17.2

Create Vue template

とりあえず動くものがほしかったので、ここ からgit cloneしてソースもってきました。

% git clone https://github.com/bezkoder/vue-3-typescript-example
% cd vue-3-typescript-example
% npm install
% npm run serve 

> [email protected] serve vue-3-typescript-example
> vue-cli-service serve

 INFO  Starting development server...

 App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.11.2:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Issues checking in progress...
No issues found.

npm installしてnpm runすれば8081ポートで起動します。
CRUD機能が試せるみたいですが、(自分の環境では)動きませんでした。
が、ひととおり設定はできてるのでこれでOK。　　

このテンプレートではサーバとの通信にaxiosをつかっているのですが、
セッションを使うためにsrc/http-common.tsを修正します。

const apiClient: AxiosInstance = axios.create({
  baseURL: "<サーバサイドAPIのURL>",
  withCredentials: true,
  headers: {
    "Content-type": "application/json"
  },
});

withCredentials というパラメータをtrueに設定すればOKとのことです。

Create Express template

次はサーバサイドをExpressでつくります。
まずはexpress-generatorをインストール。

% npm install express-generator

expressコマンドでテンプレート作成します。

% express express-server
% cd express-server
% npm install

express-sessionをインストール。

% npm install express-session

app.jsでexpress-sessionを使い、セッションの設定をします。
ドキュメントはこのへんをみました。

//app.js
var session = require('express-session')

app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  maxage: 1000 * 60 * 30
}))

あとはrequest.sessionで情報を取得したり、 request.session.hogeとか適当に値を設定したりします。

//routes/index.js

router.get('/api/hogehoge', function(req, res, next) {
  req.session
  res.json({'message': 'Hello World'})
});

このAPIをさきほどのVueクライアントから呼び出すようにすればOKです。